<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="摘要：
            最近在整理项目时发现有些同事写的页面代码嵌套的太多，而且有些嵌套不对，比如内容。虽然功能实现了，但是对于浏览器渲染引擎的性能还是有些影响。所以就大体上的整理了下HTML标签的嵌套规则，也希望读"
            />
        <meta property="og:description" content="摘要：
            最近在整理项目时发现有些同事写的页面代码嵌套的太多，而且有些嵌套不对，比如内容。虽然功能实现了，但是对于浏览器渲染引擎的性能还是有些影响。所以就大体上的整理了下HTML标签的嵌套规则，也希望读"
            />
        <title>19.溢出隐藏</title>
        <style>
        div {
            width: 100%;
            height: 100%;
            border: 1px black solid;
            overflow: auto;
        }
    </style>
    </head>

    <body>
        <div>
            <h1>摘要：</h1>
            <p>
                &nbsp;最近在整理项目时发现有些同事写的页面代码嵌套的太多，而且有些嵌套不对，比如&lt;a&gt;&lt;div&gt;内容&lt;/div&gt;&lt;/a&gt;。虽然功能实现了，但是对于浏览器渲染引擎的性能还是有些影响。所以就大体上的整理了下HTML标签的嵌套规则，也希望读者提出不对之处。
            </p>
            <p>众所周知，HTML标签有两类：</p>
            <ol>
                <li>块级元素<br>div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul
                    <br><strong>特点：</strong>总是在新行上开始，高度、行高以及顶和底边距都可控制，宽度缺省是它的容器的100%，除非设定一个宽度<br><strong>功能：</strong>主要用来搭建网站架构、页面布局、承载内容
                </li>
                <li>行内元素<br>span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、sup、textarea、tt、u、var
                    <br><strong>特点：</strong>和其他元素都在一行上，高、行高及顶和底边距不可改变，宽度就是它的文字或图片的宽度，不可改变<br><strong>功能：</strong>用于加强内容显示,控制细节，例如：加粗、斜体等等
                </li>
            </ol>
            <p>举个例子：</p>
            <ul>
                <li>块级元素<br>
                    <blockquote>
                        <p>&lt;div&gt;one&lt;/div&gt;&lt;div&gt;two&lt;/div&gt;</p>
                    </blockquote>
                    <p>显示效果如下：</p>
                    <p>one</p>
                    <p>two</p>
                </li>
                <li>行内元素<br>
                    <blockquote>
                        <p>&lt;span&gt;one&lt;/span&gt;&lt;span&gt;two&lt;/span&gt;</p>
                    </blockquote>
                    <p>显示效果如下：</p>
                    <p>onetwo</p>
                </li>
            </ul>
            <p>块级元素与行内元素并不是一成不变的，我们可以通过CSS来改变他的特性</p>
            <blockquote>
                <p>display: inline; //行内元素</p>
                <p>display: block; //块级元素</p>
            </blockquote>
            <p>虽然HTML标签有很多并且我们在制作页面的时候可以无限的嵌套，但是嵌套也有规则，不能随意的嵌套。有些标签是固定的嵌套规则，比如ul包含li、ol包含li、dl包含dt和dd等等。还有很多是独立的标签，我们如何来使用它编写更优秀的页面，下面就说说</p>
            <ol>
                <li>块级元素与块级元素平级、内嵌元素与内嵌元素平级 <br>
                    <blockquote>
                        <p>&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;
                            &nbsp;//span是行内元素，p是块级元素，所以这个是错误的嵌套
                        </p>
                        <p>&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;a&gt;&lt;/a&gt;&lt;/div&gt;
                            &nbsp;//对的
                        </p>
                    </blockquote>
                </li>
                <li>块元素可以包含内联元素或某些块元素，但内联元素不能包含块元素，它只能包含其它的内联元素<br>
                    <blockquote>
                        <p>&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;</p>
                        <p>&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;</p>
                    </blockquote>
                </li>
                <li>有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素
                    <blockquote>h1、h2、h3、h4、h5、h6、p、dt</blockquote>
                </li>
                <li>块级元素不能放在标签p里面<br><br></li>
                <li>
                    标签可以包含&nbsp;div&nbsp;标签，因为li&nbsp;和&nbsp;div&nbsp;标签都是装载内容的容器
                </li>
            </ol>
            <h1>小结：</h1>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;​虽然我们可以嵌套标签，但是为了提高浏览器的渲染效率，我们应该尽少的嵌套标签，扁平化</p>
            <p>&nbsp;</p>
        </div>
    </body>

</html>